<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>第四小组学习网站</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap-4.4.1.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/index.css">
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <a class="navbar-brand" href="#">导航栏</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://gitee.com/li0802/four" target="_blank">仓库</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#" id="playVideo">视频解说</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">分类</a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">廖俊杰教授</a>
                <a class="dropdown-item" href="#">林大宇教授</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">欧翁兆教授</a>
              </div>
            </li>
          </ul>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </div>
    </nav>
    <div class="container mt-3">
      <div class="row">
        <div class="col-12">
          <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
              <li data-target="#carouselExampleControls" data-slide-to="0" class="active"></li>
              <li data-target="#carouselExampleControls" data-slide-to="1"></li>
              <li data-target="#carouselExampleControls" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img class="d-block w-100" src="images/1.jpeg" alt="First slide">
                <div class="carousel-caption d-none d-md-block">
                </div>
              </div>
              <div class="carousel-item">
                <img class="d-block w-100" src="images/2.png" alt="Second slide">
                <div class="carousel-caption d-none d-md-block">
                </div>
              </div>
              <div class="carousel-item">
                <img class="d-block w-100" src="images/3.png" alt="Third slide">
                <div class="carousel-caption d-none d-md-block">
                </div>
              </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
            </a>
          </div>
        </div>
      </div>
    </div>
    <hr>
    <h2 class="text-center">推荐课程</h2>
    <hr>
    <div class="container">
      <div class="row text-center">
        <div class="col-md-4 pb-1 pb-md-0">
          <div class="card">
            <img class="card-img-top" src="images/array.png" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">阵列信号处理</h5>
              <p class="card-text">廖俊杰教授</p>
              <a href="#" class="btn btn-primary">点击了解</a>
            </div>
          </div>
        </div>
        <div class="col-md-4 pb-1 pb-md-0">
          <div class="card">
            <img class="card-img-top" src="images/en.png" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">英语半年速成复习计划</h5>
              <p class="card-text">林大宇教授</p>
              <a href="#" class="btn btn-primary">点击了解</a>
            </div>
          </div>
        </div>
        <div class="col-md-4 pb-1 pb-md-0">
          <div class="card">
            <img class="card-img-top" src="images/CAP.jpg" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">程序设计基础CAP</h5>
              <p class="card-text">罗聪教授</p>
              <a href="#" class="btn btn-primary">点击了解</a>
            </div>
          </div>
        </div>
      </div>
      <div class="row text-center mt-4">
        <div class="col-md-4 pb-1 pb-md-0">
          <div class="card">
            <img class="card-img-top" src="images/en2.jpg" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">25考研英语专项提分宝典</h5>
              <p class="card-text">欧翁兆教授</p>
              <a href="#" class="btn btn-primary">点击了解</a>
            </div>
          </div>
        </div>
        <div class="col-md-4 pb-1 pb-md-0">
          <div class="card">
            <img class="card-img-top" src="./images/java速成.jpg" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Java后端7天苏成</h5>
              <p class="card-text">杨鹏飞教授</p>
              <a href="#" class="btn btn-primary">点击了解</a>
            </div>
          </div>
        </div>
        <div class="col-md-4 pb-1 pb-md-0">
          <div class="card">
            <img class="card-img-top" src="./images/天天.jpg" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">峨眉天天无敌转身教程</h5>
              <p class="card-text">给个三连O.o</p>
              <a href="https://www.bilibili.com/video/BV15i421v7XM/?spm_id_from=333.999.0.0" class="btn btn-primary" target="_blank">点击了解</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <hr>
    <h2 class="text-center" id="more-course">更多课程</h2>
    <hr>
  <div class="container">
    <div class="course-container" id="course-container"></div>
    <button class="refresh-button" onclick="fetchAndDisplayCourses()">刷新课程</button>
    <hr>
  </div>
    <div class="container text-white bg-dark p-4">
      <div class="row">
        <div class="col-6 col-md-8 col-lg-7">
          <div class="row text-center">
            <div class="col-sm-6 col-md-4 col-lg-4 col-12">
              <ul class="list-unstyled">
                <li class="btn-link"> <a>了解更多</a> </li>
                <li class="btn-link"> <a>法律协议</a> </li>
                <li class="btn-link"> <a>反馈中心</a> </li>
                <li class="btn-link"> <a>智能客服</a> </li>
                <li class="btn-link"> <a>帮助中心</a> </li>
              </ul>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-4 col-12">
              <ul class="list-unstyled">
                <li class="btn-link"> <a>开班信息</a> </li>
                <li class="btn-link"> <a>服务公告</a> </li>
                <li class="btn-link"> <a>信任中心</a> </li>
                <li class="btn-link"> <a>专业服务</a> </li>
                <li class="btn-link"> <a>联系我们</a> </li>
              </ul>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-4 col-12">
              <ul class="list-unstyled">
                <li class="btn-link"> <a>入学攻略</a> </li>
                <li class="btn-link"> <a>举报中心</a> </li>
                <li class="btn-link"> <a>查看证书</a> </li>
                <li class="btn-link"> <a>常见问题</a> </li>
                <li class="btn-link"> <a>关于我们</a> </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-lg-5 col-6">
          <address>
            <strong>小组成员：</strong><br>
            组长：李明灿<br>
            成员：林大宇、欧翁兆、罗聪、<br>
            成员：廖俊杰、杨鹏飞
          </address>
        </div>
      </div>
    </div>
    <footer class="text-center">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <p>&copy; 2024第四小组</p>
          </div>
        </div>
      </div>
    </footer>

    <div class="video-overlay" id="videoOverlay">
      <div class="video-container">
          <button class="close-btn" id="closeBtn">×</button>
          <video controls id="videoPlayer">
              <source src="./video/video.mp4" type="video/mp4">
              您的浏览器不支持 HTML5 视频
          </video>
      </div>
  </div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap-4.4.1.js"></script>
    <script src="./js/api.js"></script>
  </body>
</html>